@charset "UTF-8";

/*
 *            >>>  EasyWebUI.css  <<<
 *
 *
 *    A CSS Framework which is similar to BootStrap,
 *    and can be used in the Web UI development of
 *    Any Platform.
 *
 *    [Version]    v1.0  (2015-11-26)
 *
 *    [Require]    CSS 2.1  (Best Effect with CSS 3),
 *
 *                 Font Awesome  v4,
 *
 *                 EasyWebUI.js
 *
 *
 *      (C)2014-2015    test_32@fyscu.com
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/* ----------- HTML Reset ---------- */
/*
    Reset the style of HTML Element to a Modern View,
    to improve the User Experience.
*/
html, body {
    margin:         0;
    padding:        0;
    /*  Specific Font Names is used for setting Sans-Serif Chinese Font
        in Google Chrome on Windows, Linux/UNIX and Mac OS X.            */
    font-family:    "Microsoft YaHei", "WenQuanYi Micro Hei", STXihei,
                    sans-serif, monospace;
    background:     rgb(231, 231, 231);
    height:         100%;
}
@media (min-width: 1920px), (min-height:  600px) {
    html, body {
        font-size:    18px  !important;
    }
}
input, textarea, select, button {
    /*  This setting is used for Elements within Document Fragment
        or as a Form Sub-Element.                                   */
    font-family:    "Microsoft YaHei", "WenQuanYi Micro Hei", STXihei,
                    sans-serif, monospace;
}
/* ----- Textual Elements ----- */
/* --- HyperLink --- */
a:link, a:visited {
    text-decoration:    none;
    color:              black;
}
a:hover, a:active {
    text-decoration:    underline;
}
a:hover {
    color:    blue;
}
a:active {
    color:    red;
}
a img {
    border:    none;
}
/* --- Important Information --- */
em,  output  {
    padding:        0  0.25em;
    font-style:     normal;
    font-weight:    bold;
}
hr {
    margin:    1.5em  3em  !important;
    border:    1px  solid  darkgray;
}
/* --- Quote --- */
pre {
    font-size:        20px;
    text-align:       left;
    word-wrap:        break-word;
    background:       lightgray;
    border:           1px  solid  darkgray;
    border-radius:    3px;
    padding:          1em;
    margin:           auto;
}
code {
    color:            darkred;
    background:       pink;
    padding:          0.1em  0.3em;
    border:           1px  solid  hotpink;
    border-radius:    0.3em;
}
/* ----- Data Table ----- */
table {
    border-collapse:    collapse;
    border-spacing:     0;
    margin:             0.1em  0;
    width:              100%;
}
table tr {
    line-height:    2em;
}
table th, table td {
    padding:    0.5em;
}
@media (max-width: 1280px) {
    table td {
        max-width:    30em;
    }
}
table th {
    white-space:    nowrap;
    text-align:     center;
}
thead tr {
    background:    rgb(93, 92, 96)  !important;
    color:         white  !important;
}
tbody tr {
    font-size:     0.9em;
    transition:    background-color  ease-in-out  .15s,
                   box-shadow        ease-in-out  .15s;
    max-height:    20em;
}
tbody tr:hover {
    background:    whitesmoke  !important;
}
tbody tr.selected {
    background:    rgb(176, 190, 217);
}
tbody tr.focus {
    background-color:    rgb(35, 160, 220)  !important;
    box-shadow:          inset  0  1px  1px  rgba(0, 0, 0, 0.075),
                         0  0  8px  rgba(14, 144, 210, 0.6);
}
/* ----- Form Elements ----- */
form {
    padding:    0  1em;
}
label {
    word-spacing:    0.5em;
    cursor:          pointer;
}
fieldset {
    margin:     1em  0;
    padding:    1em;
	border:     1px  solid;
}
fieldset > legend {
    padding:          0  1em;
    border:           1px  solid;
    border-top:       0;
    border-bottom:    0;
}
/* --- Button --- */
input[type="button"],  button,  a.Button,
input[type="submit"],  input[type="reset"]  {
    -webkit-appearance:         none;
       -moz-appearance:         none;
            appearance:         none;
            text-decoration:    none;
            text-align:         center;
            font-size:          1em;
            word-wrap:          break-word;
            word-break:         break-all;
            background:         rgb(88, 167, 0);
            color:              white;
            padding:            0.5em  1em;
            border:             none;
            border-radius:      5px;
            display:            inline-block;
            margin:             0  0.5em;
}
input[type="button"]:hover,  input[type="button"]:active,
button:hover,                button:active,
a.Button:hover,              a.Button:active,
input[type="submit"]:hover,  input[type="submit"]:active,
input[type="reset"]:hover,   input[type="reset"]:active  {
    background:    gray;
    opacity:       0.7;
    cursor:        pointer;
}
button > *,  a.Button > *  {
    display:           inline-block;
    vertical-align:    middle;
    max-height:        1.5em;
    margin:            0  0.5em;
}
input[type="submit"], button[type="submit"] {
    display:      block;
    max-width:    50%  !important;
    min-width:    8em;
    margin:       1em  auto;
}
/* --- Text Input --- */
input[type="text"],   input[type="password"],
input[type="tel"],    input[type="number"],
input[type="email"],  input[type="url"],
input[type="search"], input[type="date"],
select,               textarea {
    font-size:        1em;
    padding:          0.5em;
    border:           1px  solid  rgb(204, 204, 204);
    border-radius:    5px;
    transition:       border-color  ease-in-out  .15s,
                      box-shadow    ease-in-out  .15s;
    display:          inline-block;
}
input[type="text"]:focus,     input[type="text"]:hover,
input[type="password"]:focus, input[type="password"]:hover,
input[type="tel"]:focus,      input[type="tel"]:hover,
input[type="number"]:focus,   input[type="number"]:hover,
input[type="email"]:focus,    input[type="email"]:hover,
input[type="url"]:focus,      input[type="url"]:hover,
input[type="search"]:focus,   input[type="search"]:hover,
input[type="date"]:focus,     input[type="date"]:hover,
select:focus,                 select:hover,
textarea:focus,               textarea:hover {
    outline:         none;
    border-color:    rgb(14, 144, 210);
    box-shadow:      inset  0  1px  1px  rgba(0, 0, 0, 0.075),
                     0  0  8px  rgba(14, 144, 210, 0.6);
}
input:-moz-placeholder,
input::-moz-placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder {
    text-overflow:    ellipsis;
}
/* --- Search Bar --- */
input.Search, input[type="search"] {
    width:    7em;
}
input.Search:hover, input[type="search"]:hover {
    width:    15em;
}
/* --- Radio & Check --- */
input[type="radio"], input[type="checkbox"] {
    -webkit-appearance:    none;
       -moz-appearance:    none;
            appearance:    none;
            width:         1.5em;
            height:        1.5em;
            border:        1px  solid  gray;
            background:    white;
            outline:       none;
}
input[type="radio"] {
    border-radius:    50%;
}
input[type="radio"]:before,
input[type="checkbox"]:before {
    display:        inline-block;
    width:          100%;
    height:         100%;
    line-height:    70%;
    text-align:     center;
    opacity:        0;
}
input[type="radio"]:before {
    content:      "\25CF";
    font-size:    1.5em;
}
input[type="checkbox"]:before {
    content:    "\2714";
}
input[type="radio"]:checked:before,
input[type="checkbox"]:checked:before {
	opacity:    1;
}
/* --- File Input --- */
input[type="file"] {
    cursor:    pointer;
}
/* --- Range Input --- */
/*
    Thank for Range.css --- http://danielstern.ca/range.css/
*/
input[type="range"] {
    -webkit-appearance:    none;
       -moz-appearance:    none;
            appearance:    none;
            width:         100%;
            height:        1.5em;
            background:    transparent;
            outline:       none;
            cursor:        pointer;
            position:      relative;
}
input[type="range"]::-webkit-slider-runnable-track {
    width:            100%;
    height:           1.5em;
    background:       rgb(230, 230, 230);
    border:           1px  solid  gray;
    border-radius:    0.75em;
}
input[type="range"]::-moz-range-track {
    width:            100%;
    height:           1.5em;
    background:       rgb(230, 230, 230);
    border:           1px  solid  gray;
    border-radius:    0.75em;
}
input[type="range"]::-ms-track {
    width:            100%;
    height:           1.5em;
    background:       transparent;
    border:           1px  solid  gray;
    border-radius:    0.75em;
    color:            transparent;
}
input[type="range"]:before,
input[type="range"]:after   {
    position:    absolute;
}
input[type="range"]:before {
    content:          " ";
    background:       greenyellow;
    width:            0;
    height:           1.4em;
    border-radius:    0.75em;
    left:             1px;
    top:              1px;
}
input[type="range"]::-ms-fill-lower {
    background:    greenyellow;
}
input[type="range"]::-ms-fill-upper {
    background:    lightgray;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:       none;
       -moz-appearance:       none;
            appearance:       none;
            background:       white;
            border:           1px  solid  gray;
            height:           1.5em;
            width:            2em;
            border-radius:    0.75em;
            margin-top:       -1px;
            margin-left:      -1px;
            position:         relative;
}
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb {
    -webkit-appearance:       none;
       -moz-appearance:       none;
            appearance:       none;
            background:       white;
            border:           1px  solid  gray;
            height:           1.5em;
            width:            2em;
            border-radius:    0.75em;
            margin-top:       -1px;
            margin-left:      -1px;
}
input[type="range"].Detail:before,
input[type="range"].Detail:after    {
    bottom:    -1.5em;
    color:     black;
}
input[type="range"].Detail:before {
    content:    attr(min);
    left:       0;
}
input[type="range"].Detail:after {
    content:    attr(max);
    left:       85%;
}
input[type="range"].Detail::-ms-fill-lower {
    background:    lightgray;
}
input[type="range"].Detail:focus::-webkit-slider-runnable-track,
input[type="range"].Detail:focus::-moz-range-track {
    background:    deepskyblue;
}
input[type="range"].Detail:focus::-ms-fill-lower,
input[type="range"].Detail:focus::-ms-fill-upper  {
    background:    deepskyblue;
}
datalist {
    display:    none  !important;
}
/* ----- iFrame ----- */
iframe {
    width:    100%;
}
iframe[src^="http:"],
iframe[src^="https:"],
iframe[src^="//"],
iframe[rel~="nofollow"] {
    min-height:    600px;
}


/* ----------- Layout System ---------- */
/*
    Build three kinds of Layout Box based on Border-Box Model
    (with Float Clear Fix), which are very easy to use:

    [ Grid Row/Column ]

        Column Box based on the Proportion of Parent Element Width,
        which is easy to set contents to Vertical-Center.

    [ Item Box ]

        A kind of Content Box with Cool Border, which can Float to
        Fit the Size Changing of the Viewport.

        It also can be set Horizontal-Center easily.

    [ Flex Box ]

        A Compatibility Wrapper of CSS 3 Flex-Box Layout

    -----------

    [ Tool Classes ]

        CenterX, CenterY, Ellipsis, Float-L, Float-R, Fix-Top, PC_Narrow
*/
* {
    box-sizing:    border-box;
}
.Block {
    display:    block;
}
.ClearFix:after, body:after,
ul:after,        form:after,    div:after,
header:after,    footer:after,  nav:after,
article:after,   section:after, aside:after {
    content:        " ";
    font-size:      0;
    line-height:    0;
    height:         0;
    width:          0;
    visibility:     hidden;
    display:        block;
    clear:          both;
    zoom:           1;
}
.CenterX {
    text-align:    center  !important;
}
.Ellipsis,
.Ellipsis a,  .Ellipsis span,
.Ellipsis li, .Ellipsis td {
    overflow:         hidden;
    white-space:      nowrap;
    text-overflow:    ellipsis;
}
.Float-L { float:  left; }
.Float-R { float:  right; }
.Fix-Top {
    position:    fixed;
    z-index:     2000000000;    /*  Max: 2147483647  */
}
/* ----- Adaptive Fix-Top ----- */
html.Fixed,
html.Fixed > body {
    position:    relative;
    overflow:    hidden;
}
html.Fixed > body > .Fix-Top {
    position:    relative;
}
.PC_Narrow {
    min-width:    800px;
    max-width:    960px;
    margin:       auto  !important;
}
@media (max-width: 960px) {
    .PC_Narrow {
        width:        100%  !important;
        min-width:    initial;
    }
}
@media (min-width: 1280px) {
    .PC_Narrow {
        width:        80%  !important;
        max-width:    initial;
    }
}

/* ----- Grid Column ----- */
.Grid-Row {
    display:    table  !important;
    width:      100%;
    margin:     0  auto  !important;
    padding:    0  !important;
}
.Grid-Row > .Grid-Column {
    display:           table-cell  !important;
    vertical-align:    top;
}
.Grid-Row.CenterY {
    height:    100%;
}
.Grid-Row.CenterY > .Grid-Column,
.Grid-Column.CenterY {
    float:             none  !important;
    vertical-align:    middle;
}
.Grid-Row.Bottom > .Grid-Column,
.Grid-Column.Bottom {
    float:             none  !important;
    vertical-align:    bottom;
}
.Grid-Column > p {
    margin:     0;
    padding:    1em  0;
}
.Column_1-1 {
    width:         100%;
    text-align:    left  !important;
}
.Column_1-2 {
    width:    50%;
}
.Column_1-3 {
    width:    33.3%;
}
.Column_2-3 {
    width:    66.6%;
}
.Column_1-4 {
    width:    25%;
}
.Column_3-4 {
    width:    75%;
}
.Column_1-5 {
    width:    20%;
}
.Column_4-5 {
    width:    80%;
}
.Column_2-5 {
    width:    40%;
}
.Column_3-5 {
    width:    60%;
}
.Column_1-6 {
    width:    16.6%;
}
.Column_5-6 {
    width:    83.3%;
}
.Column_1-7 {
    width:    14.2%;
}
.Column_6-7 {
    width:    85.7%;
}
.Column_3-7 {
    width:    42.8%;
}
.Column_4-7 {
    width:    57.1%;
}
.Column_4-9 {
    width:    44.4%;
}
.Column_5-9 {
    width:    55.5%;
}
.Column_3-10 {
    width:    30%;
}
.Column_11-20 {
    width:    55%;
}
/* ----- Item Box ----- */
.Item-Box {
    display:    inline-block;
    margin:     0  1%  0.5em;
}
.Item-Box.visible {
    background:    white;
    border:        1px  solid  rgb(215, 215, 215);
    box-shadow:    1px  2px  3px  rgb(200, 200, 200);
    transition:    border-color  ease-in-out  .15s,
                   box-shadow    ease-in-out  .15s;
    padding:       1em;
}
.Item-Box.visible:hover {
    border-color:    rgb(14, 144, 210);
    box-shadow:      inset  0  1px  1px  rgba(0, 0, 0, 0.075),
                     0  0  8px  rgba(14, 144, 210, 0.6);
}
/* ----- Flex Box ----- */
.Flex-Box {
    display:       -moz-box  !important;        /*  Old Version:  Firefox (buggy)  */
    display:    -webkit-box  !important;        /*  Old Version:  Safari, iOS, Android Browser, older WebKit Browsers  */
    display:         -o-box  !important;        /*  Classic Opera  */
    display:        -ms-flexbox  !important;    /*  Mix Version:  IE 10  */
    display:       -moz-flex  !important;
    display:    -webkit-flex  !important;
    display:         -o-flex  !important;
    display:            flex  !important;

    width:              auto;
}
.Flex-Box.Column {
       -moz-box-orient:        vertical;
    -webkit-box-orient:        vertical;
         -o-box-orient:        vertical;
       -moz-flex-direction:    column;
    -webkit-flex-direction:    column;
         -o-flex-direction:    column;
            flex-direction:    column;
}
.Flex-Box.Column > * {
    width:    100%;
}
.Flex-Box.Row {
       -moz-box-orient:        horizontal;
    -webkit-box-orient:        horizontal;
         -o-box-orient:        horizontal;
       -moz-flex-direction:    row;
    -webkit-flex-direction:    row;
         -o-flex-direction:    row;
            flex-direction:    row;
}
.Flex-Box.Row > * {
    min-height:    3em;
}
.Flex-Box.CenterX {
       -moz-box-pack:           center;
    -webkit-box-pack:           center;
         -o-box-pack:           center;
        -ms-flex-pack:          center;
       -moz-justify-content:    center;
    -webkit-justify-content:    center;
         -o-justify-content:    center;
            justify-content:    center;
            text-align:         left;
}
.Flex-Box.CenterY {
    -webkit-box-align:      center;
       -moz-box-align:      center;
        -ms-flex-align:     center;
       -moz-align-items:    center;
    -webkit-align-items:    center;
         -o-align-items:    center;
            align-items:    center;
}


/* ----------- Function Module ---------- */
/*
    Control Modes:

    [ Tab Mode classes ]

        *  Point :      Content Element Serial Number

        *  Card :       Tab Card looking within Text (Icon is optional)

        *  Button :     Switch Button looking within Text (Icon is optional)

        *  Monitor :    Monitors looking within Thumbnail

*/
.Web-Body {
    background:    ivory;
    max-width:     960px;
    height:        100%;
    margin:        auto;
    padding:       0  1em;
}

/* ---------- Form Row ---------- */
form .Row {
    margin:        16px  auto;
    max-width:     100%;
    text-align:    left;
    font-size:     0;
}
form .Flex-Box.Row {
    margin:       auto;
    font-size:    16px;
}
form .Row > * {
    display:           inline-block;
    vertical-align:    middle;
    font-size:         13px;
}
@media (min-width: 400px) {
    form .Row > * {
        font-size:    18px;
    }
}
form .Row > label[for] {
    text-align:       center;
    width:            28.5%;
    max-width:        28.5%;
    white-space:      nowrap;
    overflow:         hidden;
    text-overflow:    ellipsis;
}
form .Row > input[type="text"],    form .Row > input[type="password"],
form .Row > input[type="email"],   form .Row > input[type="url"],
form .Row > input[type="search"],  form .Row > input[type="tel"],
form .Row > input[type="number"],  form .Row > input[type="range"],
form .Row > textarea,              form .Row select   {
    width:      68.5%;
}
form .Row.Grid-Row > .Grid-Column {
    padding-left:    0.5em;
}
form .Row.Grid-Row > .Grid-Column:first-child {
    padding:    0;
}

/* ---------- Navigation Bar ---------- */
ul.NavBar {
    list-style:    none;
    margin:        0;
    padding:       0;
}
ul.NavBar > li {
    display:       inline-block;
    padding:       0.5em;
    text-align:    center;
    cursor:        pointer;
}
ul.NavBar > li.Separator:before {
    content:    "|";
}
ul.NavBar > li * {
    cursor:    auto;
}
ul.NavBar > li > a {
    display:    block;
    width:      100%;
    outline:    none;
}
ul.NavBar.visible > li:nth-child(n+2) > a {
    border-left:    1px  solid  rgb(200, 200, 200);
}
ul.NavBar > li > a:active,
ul.NavBar > li > a:hover {
    color:              black;
    text-decoration:    none;
}
ul.NavBar > li:active {
    background:    rgb(230, 230, 230);
}

/* ----- DropDown Menu ----- */
.DropDown.Head {
    position:      relative;
    min-height:    1.5em;
}
.DropDown.Body {
    display:       none;
    position:      absolute;
    top:           100%;
    left:          0;
    z-index:       2000000000;
    box-shadow:    0  1px  2px  gray;
    padding:       0.5em;
}
.DropDown.Head:hover > .DropDown.Body {
    display:       block;
    background:    white;
    color:         black;
}
ul.DropDown.Body {
    margin:        0;
    padding:       0;
    list-style:    none;
}
ul.DropDown.Body > li > a {
    display:            block;
    padding:            1em  2em;
    text-decoration:    none;
}
ul.DropDown.Body > li > a:hover,
ul.DropDown.Body > li > a:focus  {
    background:    lightgray;
    color:         white;
}
/*
    ul.NavBar has same appearance as .DropDown.Body on Mobile Device
*/
@media (max-width:  640px) {
    .DropDown.Head {
        font-size:        1.5em;
        border:           1px  solid;
        border-radius:    5px;
        width:            1.5em;
    }
    .DropDown.Head:before {
        content:       "\221e";
        display:       inline-block;
        width:         100%;
        height:        100%;
        text-align:    center;
    }
    ul.NavBar {
        display:       none;
        position:      absolute;
        top:           105%;
        left:          -5.5em;
        z-index:       2000000000;
        box-shadow:    0  1px  2px  gray;
    }
    .DropDown.Head:hover > ul.NavBar {
        display:       block;
        background:    white;
        color:         black;
        min-width:     7em;
    }
    ul.NavBar > li.Separator {
        border-top:    1px  solid  gray;
        padding:       0;
        width:         80%;
    }
    ul.NavBar > li.Separator:before {
        content:    none;
    }
    ul.NavBar > li {
        padding:    0;
        margin:     5%;
        width:      90%;
    }
    ul.NavBar > li > a {
        text-decoration:    none;
        color:              black  !important;
        border:             none  !important;
    }
    ul.NavBar > li > a:hover,
    ul.NavBar > li > a:focus  {
        background:    lightgray;
        color:         white;
    }
}

ul.Content_Nav {
    padding:           0;
    border-bottom:     1px  solid  rgb(200, 200, 200);
    padding-bottom:    0.5em;
}
.Content_Nav li {
    display:    inline;
}
.Content_Nav li .Icon {
    padding:    0  1em;
}
.Content_Nav li a {
    display:            inline;
    text-decoration:    none;
    color:              black;
}
.Content_Nav .Sub_Label:before {
    content:        "/";
    color:          rgb(150, 150, 150);
    margin:         0  0.5em;
}

img.Logo,  .Logo img  {
    display:           inline-block;
    vertical-align:    middle;
    padding:           0.5em;
    max-height:        100%;
    max-width:         100%;
}
img.UserLogo {
    max-height:        2.5em;
    border:            3px  solid  white;
    border-radius:     10px;
    margin:            5px;
}

.Progress {
    height: 20px;
    margin: 1em;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    border-radius: 4px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.Progress-Bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: rgb(255, 255, 255);
    text-align: center;
    background-color: rgb(66, 139, 202);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    transition: width .6s ease;
}
.Progress-Bar_striped {
    background-image:    linear-gradient(45deg,
        rgba(255, 255, 255, 0.15)  25%,
        rgba(0, 0, 0, 0)           25%,
        rgba(0, 0, 0, 0)           50%,
        rgba(255, 255, 255, 0.15)  50%,
        rgba(255, 255, 255, 0.15)  75%,
        rgba(0, 0, 0, 0)           75%,
        rgba(0, 0, 0, 0)
    );
    background-size:     40px  40px;
}
.Progress-Bar.active {
    -webkit-animation:    Progress-Bar_stripes  2s  linear  infinite;
    -o-animation:         Progress-Bar_stripes  2s  linear  infinite;
    animation:            Progress-Bar_stripes  2s  linear  infinite;
}

/* ---------- Panel Control ---------- */
.Panel {
    overflow:    hidden;
    padding:     0.5em;
}
.Panel > .Head {
    font-weight:       bold;
    letter-spacing:    0.5em;
    border-left:       3px  solid  black;
    padding:           0.5em;
    background:        white;
    box-shadow:        1px  2px  3px  gray;
    width:             99.5%;
}
.Panel > .Body {
    padding:    0.5em;
}

/* ---------- Tab Control ---------- */
.Tab > label {
    display:          inline-block;
    margin-bottom:    -1px;
    padding:          0.5em  1em;
    line-height:      2.3em;
    text-align:       center;
    background:       rgb(230, 230, 230);
    color:            rgb(118, 118, 119);
    cursor:           pointer;
}
.Tab > label.active {
    background:     white;
    font-weight:    bold;
}
.Tab > label:hover {
    background:    rgb(200, 200, 200);
}
.Tab > .Body,
.Tab > div,    .Tab > section  {
    padding:             1em;
    overflow-x:          hidden;
    overflow-y:          auto;
    background-color:    white;
    border-radius:       0  5px  5px  5px;
    height:              90%;
}
.Tab > input[type="radio"],
.Tab > input[type="radio"] + * {
    display:    none;
}
.Tab > input[type="radio"]:checked + * {
    display:    block;
}

.Tab.Point .Grid-Column > .Head,
.Tab.Button .Grid-Column > .Head,
.Tab.Monitor .Grid-Column > .Head {
    font-size:    2em;
    color:        royalblue;
}
.Tab.Point .Grid-Column > .Head,
.Tab.Monitor .Grid-Column > .Head {
    font-size:    3em;
}
.Tab.Point .Grid-Column > ul,
.Tab.Button .Grid-Column > ul,
.Tab.Monitor .Grid-Column > ul {
    list-style:    none;
}
/* ----- Button Mode ----- */
.Tab.Button > label {
    margin:           0  0.5em;
    padding:          1.5em;
    border:           1px  solid  lightgray;
    border-radius:    0;
    box-shadow:       1px  2px  3px  rgb(118, 118, 119);
    background:       white;
}
/* ----- Monitor Mode ----- */
.Tab.Monitor > label {
    margin:           1em  1%;
    padding:          0;
    line-height:      normal;
    font-size:        2em;
    text-align:       left;
    background:       white;
    border:           1px  solid  rgb(215, 215, 215);
    box-shadow:       1px  2px  3px  rgb(200, 200, 200);
    transition:       border-color  ease-in-out  .15s,
                      box-shadow    ease-in-out  .15s;
    border-radius:    0;
    display:          inline-block;
    max-width:        30%;
}
.Tab.Monitor > label:hover {
    border-color:    rgb(14, 144, 210);
    box-shadow:      inset  0  1px  1px  rgba(0, 0, 0, 0.075),
                     0  0  8px  rgba(14, 144, 210, 0.6);
    background:      white  !important;
}
.Tab.Monitor > .Body,
.Tab.Monitor > div,    .Tab.Monitor > section  {
    background:    white;
}
/* ----- Point Mode ----- */
.Tab.Point {
    position:    relative;
}
.Tab.Point > label {
    border-radius:    50%;
    padding:          0.3em;
    position:         relative;
    z-index:          1;
}
.Tab.Point.Number > label {
    padding:    0  0.8em;
}
.Tab.Point > .Body,
.Tab.Point > div,    .Tab.Point > section  {
    background-color:    transparent;
    background-size:     cover;
    position:            relative;
    z-index:             0;
}


/* ----------- Atom View ---------- */
.Black {
    color:           rgb(53, 52, 57)  !important;
    border-color:    rgb(53, 52, 57)  !important;
}
.Black_O {
    background:      rgb(53, 52, 57)  !important;
    color:           white  !important;
    border-color:    transparent  !important;
}
.Red {
    color:           rgb(245, 80, 80)  !important;
    border-color:    rgb(245, 80, 80)  !important;
}
.Red_O {
    background:      rgb(245, 80, 80)  !important;
    color:           white  !important;
    border-color:    transparent  !important;
}
.Green {
    color:           rgb(88, 167, 0)  !important;
    border-color:    rgb(88, 167, 0)  !important;
}
.Green_O {
    background:      rgb(88, 167, 0)  !important;
    color:           white  !important;
    border-color:    transparent  !important;
}
.Blue {
    color:           rgb(26, 121, 224)  !important;
    border-color:    rgb(26, 121, 224)  !important;
}
.Blue_O {
    background:      rgb(26, 121, 224)  !important;
    color:           white  !important;
    border-color:    transparent  !important;
}
.Gray_O {
    background:      rgb(235, 235, 235)  !important;
    color:           black  !important;
    border-color:    transparent  !important;
}
.Orange_O {
    background:      rgb(254, 178, 18)  !important;
    color:           white  !important;
    border-color:    transparent  !important;
}
.Round {
    border-radius:    50%  !important;
    display:          inline-block;
    padding:          8px;
    text-align:       center;
}
.Halo {
    box-shadow:    0  0  25px  gray;
}
.Rotate-90 {
       -moz-transform:    rotate(90deg);
         -o-transform:    rotate(90deg);
    -webkit-transform:    rotate(90deg);
            transform:    rotate(90deg);
            filter:       progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.Rotate-180 {
       -moz-transform:    rotate(180deg);
         -o-transform:    rotate(180deg);
    -webkit-transform:    rotate(180deg);
            transform:    rotate(180deg);
            filter:       progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.Flip-Y {
       -moz-transform:    scale(-1，1);
         -o-transform:    scale(-1，1);
    -webkit-transform:    scale(-1，1);
            transform:    scale(-1，1);
            filter:       FlipH();
}
.Flip-X {
       -moz-transform:    scale(1，-1);
         -o-transform:    scale(1，-1);
    -webkit-transform:    scale(1，-1);
            transform:    scale(1，-1);
            filter:       FlipV();
}
.Reflect {
    -webkit-box-reflect:    below  0px  -webkit-gradient(
        linear,
        left top, left bottom,
        from(transparent), to(rgba(250, 250, 250, 0.1))
    );
}
/* ----- Background ----- */
.Background-Image {
    background-position:    center;
    background-repeat:      no-repeat;
    background-size:        contain;
    background-color:       transparent;
    min-height:             10em;
    min-width:              15em;
}
/* ----- Icon ----- */
.Icon {
    display:       inline-block;
    font-style:    normal;
    font-size:     1.5em;
    width:         2em;
    height:        2em;
}
.Icon:before {
    display:       inline-block;
    width:         100%;
    height:        100%;
    text-align:    center;
}
.Icon.Mail:before {
    content:    "\2709";
}
.Icon.Heart:before {
    content:    "\2661";
}
.Icon.Eye:before {
    content:    "\1F440";
}
.Icon.Star:before {
    content:    "\2730";
}
.Icon.Return:before {
    content:    "\21e6";
}
/* ----- Responsive Design ----- */
@media (max-width:  540px) {
    html {
        scrollbar-face-color:          transparent;
        scrollbar-shadow-color:        transparent;
        scrollbar-highlight-color:     transparent;
        scrollbar-3dlight-color:       transparent;
        scrollbar-darkshadow-color:    transparent;
        scrollbar-track-color:         transparent;
        scrollbar-arrow-color:         transparent;
    }
    ::-webkit-scrollbar {
        display:    none;
    }
    @-moz-document url-prefix("http://"), url-prefix("https://") {
        scrollbar, thumb, scrollbarbutton {
            display:    none  !important;
        }
    }
    .No_Mobile {
        display:    none  !important;
    }
}
@media (min-width:  600px) {
    body.Mobile {
        max-width:    600px;
        margin:       auto;
    }
}

/* ----------- App Framework ---------- */
body:before {
    content:       " ";
    position:      fixed;
    left:          0;
    top:           0;
    z-index:       2000000010;
    width:         100%;
    height:        100%;
    background:    darkgray;
}
body.Loaded:before {
    content:    none;
}
body .Session {
    display:    none  !important;
}
body.Session .Session ~ * {
    display:    none  !important;
}
body > .Dialog {
    display:    none;
}